<div class="flex items-center p-1 cursor-pointer text-sm font-medium rounded-lg shadow-lg border-[0.5px]
      bg-components-card-bg border-components-panel-border text-token-text-secondary"
   [cdkMenuTriggerFor]="zoomMenu"
  >
    <div
      class="flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer active:scale-95 transition-transform hover:bg-black/5"
      [matTooltip]="'PAC.Xpert.ZoomOut' | translate: {Default: 'Zoom out'}"
      (click)="$event.stopPropagation(); onZoomOut()"
      >
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="w-5 h-5"
      >
        <path
          d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z"
        ></path>
      </svg>
    </div>
    <div class="w-[34px] text-center">{{ fZoomScale }}%</div>
    <div
      class="flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer active:scale-95 transition-transform hover:bg-black/5"
      [matTooltip]="'PAC.Xpert.ZoomIn' | translate: {Default: 'Zoom in'}"
      (click)="$event.stopPropagation(); onZoomIn()"
    >
    <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="w-5 h-5"
    >
        <path
        d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z"
        ></path>
    </svg>
    </div>
</div>

<div class="flex items-center gap-1 p-1 rounded-lg border-[0.5px] shadow-lg
  bg-components-card-bg border-components-panel-border text-token-text-secondary">
  <button type="button"
    [matTooltip]="'PAC.Xpert.Undo' | translate: {Default: 'Undo'}"
    class="flex items-center px-1.5 w-8 h-8 rounded-md text-sm font-medium enabled:hover:bg-black/5 enabled:hover:text-gray-700 enabled:cursor-pointer select-none "
    [disabled]="!historyHasPast()"
    (click)="undo()"
  >
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      class="w-5 h-5"
    >
    <path
        d="M5.82843 6.99955L8.36396 9.53509L6.94975 10.9493L2 5.99955L6.94975 1.0498L8.36396 2.46402L5.82843 4.99955H13C17.4183 4.99955 21 8.58127 21 12.9996C21 17.4178 17.4183 20.9996 13 20.9996H4V18.9996H13C16.3137 18.9996 19 16.3133 19 12.9996C19 9.68584 16.3137 6.99955 13 6.99955H5.82843Z"
    ></path>
    </svg>
  </button>
  <button type="button"
    [matTooltip]="'PAC.Xpert.Redo' | translate: {Default: 'Redo'}"
    class="flex items-center px-1.5 w-8 h-8 rounded-md text-sm font-medium enabled:hover:bg-black/5 enabled:hover:text-gray-700 enabled:cursor-pointer select-none"
    [disabled]="!historyHasFuture()"
    (click)="redo()"
  >
    <svg
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="currentColor"
    class="w-5 h-5"
    >
    <path
        d="M16 7H11C7.68629 7 5 9.68629 5 13C5 16.3137 7.68629 19 11 19H20V21H11C6.58172 21 3 17.4183 3 13C3 8.58172 6.58172 5 11 5H16V1L22 6L16 11V7Z"
    ></path>
    </svg>
  </button>
  <div class="mx-[3px] w-[1px] h-3.5 bg-gray-200"></div>
  <div class="inline-block">
    <div class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-black/5 cursor-pointer"
      [matTooltip]="'PAC.Xpert.ChangeHistory' | translate: {Default: 'Change History'}"
      [cdkMenuTriggerFor]="historyMenu"
      [cdkMenuPosition]="[
        {
          originX: 'end',
          originY: 'top',
          overlayX: 'center',
          overlayY: 'bottom',
          offsetY: -12,
        }
      ]"
    >
      <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="w-5 h-5"
      >
        <path
        d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"
        ></path>
      </svg>
    </div>
  </div>
</div>

<div class="flex items-center gap-1 p-1 rounded-lg border-[0.5px] shadow-lg
  bg-components-card-bg border-components-panel-border text-token-text-secondary">
  <div>
    <div
      class="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer"
      [cdkMenuTriggerFor]="menu.template"
      [cdkMenuPosition]="[
        {
          originX: 'start',
          originY: 'top',
          overlayX: 'start',
          overlayY: 'bottom',
          offsetY: -12,
        }
      ]"
    >
      <svg
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          class="w-5 h-5"
      >
          <path
          d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11H7V13H11V17H13V13H17V11H13V7H11V11Z"
          ></path>
      </svg>
    </div>
  </div>

  <div class="mx-[3px] w-[1px] h-3.5 bg-gray-200"></div>
  <div class="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer
      active:scale-95 transition-transform"
    [matTooltip]="'PAC.Xpert.ArrangeNodes' | translate: {Default: 'Arrange nodes'}"
    (click)="autoLayout()"
  >
    <svg
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="currentColor"
        class="w-5 h-5"
        >
        <path
            d="M4 3C3.44772 3 3 3.44772 3 4V10C3 10.5523 3.44772 11 4 11H10C10.5523 11 11 10.5523 11 10V4C11 3.44772 10.5523 3 10 3H4ZM4 13C3.44772 13 3 13.4477 3 14V20C3 20.5523 3.44772 21 4 21H10C10.5523 21 11 20.5523 11 20V14C11 13.4477 10.5523 13 10 13H4ZM14 13C13.4477 13 13 13.4477 13 14V20C13 20.5523 13.4477 21 14 21H20C20.5523 21 21 20.5523 21 20V14C21 13.4477 20.5523 13 20 13H14ZM15 19V15H19V19H15ZM5 9V5H9V9H5ZM5 19V15H9V19H5ZM16 11V8H13V6H16V3H18V6H21V8H18V11H16Z"
        ></path>
    </svg>
  </div>
</div>

<ng-template #zoomMenu>
  <div class="ngm-cdk-menu p-2" cdkMenu>
    @for (level of zoomScales; track level) {
      <button
        class="ngm-cdk-menu-item flex items-center justify-start px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700"
        (click)="onZoomTo(level)"
      >
        {{level}}%
      </button>
    }
    <button
      class="ngm-cdk-menu-item flex items-center justify-between px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700"
      (click)="onFitToScreen()"
    >
      自适应视图
      <div class="flex items-center gap-0.5 h-4 text-xs text-gray-400">
        <div class="capitalize">⌘</div>
        <div class="capitalize">1</div>
      </div>
    </button>
  </div>
</ng-template>


<ng-template #historyMenu>
  <div class="ngm-cdk-menu p-2" cdkMenu @overlayAnimation1>
    <div class="sticky top-0 flex items-center justify-between px-2 pb-2 text-base font-semibold bg-components-panel-bg">
      <div class="grow">{{ 'PAC.Xpert.ChangeHistory' | translate: {Default: 'Change History'} }}</div>
      <div class="shrink-0 flex items-center justify-center w-5 h-5 cursor-pointer">
      </div>
    </div>

    @for (item of histories(); track item; let index = $index) {
      <button
        class="ngm-cdk-menu-item history-item shrink-0 flex justify-between mb-0.5 px-2 py-1 rounded-lg hover:bg-primary-50 cursor-pointer"
        [ngClass]="{active: historyCursor===item.cursor}"
        (click)="onGoToHistory(index)"
      >
        <span>{{ ('PAC.Xpert.HistoryReason_' + item.reason.toUpperCase()) | translate: {Default: item.reason.toUpperCase()} }}</span> <span class="text-sm text-text-secondary">{{item.createdAt | date: 'mediumTime' }}</span>
      </button>
    }

      <div class="h-[1px] bg-gray-100 my-2"></div>
      <button
        class="ngm-cdk-menu-item danger flex items-center justify-between px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700"
        ngmAppearance="danger"
        (click)="clearHistory()"
      >{{ 'PAC.Xpert.ClearHistory' | translate: {Default: 'Clear History'} }}</button>

      <div class="px-3 w-[240px] py-2 text-sm text-gray-500">
        <div class="flex items-center mb-1 h-[22px] font-medium uppercase">{{ 'PAC.Xpert.Hint' | translate: {Default: 'Hint'} }}</div>
        <div class="mb-1 text-gray-700 leading-[18px]">{{'PAC.Xpert.StudioHistoryHint' | translate: {Default: 'Your edits histories will be tracked and stored on your device until you leave the editor. This history will be cleared when you leave the editor.'} }}</div>
      </div>
    </div>
</ng-template>

<xpert-studio-context-menu #menu="menuComponent" />